<template>
  <div class="contact">
    <div ref="contentSeaRef" class="contact-search flex">
      <el-input
        v-model="searchValue"
        placeholder="请输入账号/昵称/备注名"
        style="width: 82%"
        @keyup.prevent.enter="startSearch(searchValue)"
        clearable
        ><template #prefix>
          <el-icon class="el-input__icon"
            ><SvgIcon icon-class="search"
          /></el-icon> </template
      ></el-input>
      <sear-result
        v-model="showResult"
        :position-ele="contentSeaRef"
        :friends-data="friendsData"
      ></sear-result>
    </div>
    <div id="contact-list">
      <el-scrollbar :height="420" @scroll="scroll">
        <ul class="contact-menu">
          <li>
            <router-link
              class="contact-menu__item contact-li"
              :to="{ name: 'applyAddFriList' }"
              exact-active-class="active-listLi--item"
              ><SvgIcon icon-class="addFriend" popper-class="contact-icon" />
              新的朋友</router-link
            >
          </li>
          <li>
            <router-link
              class="contact-menu__item contact-li"
              :to="{ name: 'commManage' }"
              active-class="active-listLi--item"
              ><SvgIcon icon-class="commManage" popper-class="contact-icon" />
              通讯管理</router-link
            >
          </li>
        </ul>
        <my-friends-list
          ref="friendsLisRef"
          v-if="friends.size"
          :friends-data="friends"
          :self-id="user.userId"
        ></my-friends-list>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import myFriendsList from "./friends/index.vue";
import { useUserPinia } from "@/pinia/user";
import { useFriendPinia } from "@/pinia/friend";
import { storeToRefs } from "pinia";
import searResult from "./searResult.vue";
import { ElMessage } from "element-plus";
import type { ElInput } from "element-plus";

const userStore = useUserPinia();
const friendStore = useFriendPinia();

const { user } = storeToRefs(userStore);
const { friends } = storeToRefs(friendStore);

/**
 * 给搜索结果组件的相对定位元素一个ref属性
 */
const contentSeaRef = ref<HTMLDivElement>(document.createElement("div"));
/**
 * 搜索通讯录的朋友
 */
const searchValue = ref<string>("");
/**
 * 是否显示搜索结果
 */
const showResult = ref<boolean>(false);
/**
 * 是否正在搜索
 */
const isLoading = ref<boolean>(false);
/**
 * 返回的好友数据
 */
const friendsData = reactive<
  Array<Pick<OtherIdInfo, "userId" | "avatar" | "remark"> & { initials: string }>
>([]);
// 开始搜索
const startSearch = (keyword: string) => {
  if (!isLoading.value && keyword) {
    isLoading.value = true;
    friendStore
      .searchFriend({ keyword })
      .then((data) => {
        isLoading.value = false;
        if (data.code === 1) {
          if (data.friendsData.length) {
            friendsData.length && friendsData.splice(0);
            friendsData.push(...data.friendsData);
            showResult.value = true;
          } else
            ElMessage({
              type: "warning",
              message: "抱歉，暂无您想要的结果",
              duration: 1500,
            });
        } else
          ElMessage({
            type: "error",
            message: "查找失败",
            duration: 1500,
          });
      })
      .catch(() => {
        isLoading.value = false;
        ElMessage({
          type: "error",
          message: "查找失败",
          duration: 1500,
        });
      });
  }
};

/**
 * 给好友列表组件一个ref属性
 */
const friendsLisRef = ref<typeof myFriendsList>();
// 当滚动条滚动时关闭鼠标右击菜单
const scroll = () => (friendsLisRef.value as any).closeMenu();
</script>

<style lang="scss" scoepd>
.contact {
  color: #333;
  font-size: 15px;

  &-search {
    height: 80px;
    text-align: center;
  }

  &-icon {
    margin-right: 8px;
    font-size: 18px;
  }

  &-menu {
    border-bottom: 1px solid #dbdde33f;

    &__item {
      padding: 20px;
      display: block;
      color: inherit;
      transition: background-color 0.25s;

      &:hover {
        background-color: rgba(193, 191, 191, 0.114);
      }
    }
  }
}
</style>
